<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="backText"></block>
			<block slot="content"><text>积分提现明细</text></block>
		</cu-custom>
		
		<view class="whole-box">
			<view class="gold-black-box">
				
				<view class="top-box">
					<image class="top-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
					<view class="top-box-content">
						<view class="note-price">
							<text class="note">提现记录</text>
							<text class="price text-price">998</text>
						</view>
						<image class="icon-gold-tixian" src="@/static/icon-gold-money.png" mode="aspectFill"></image>
					</view>
				</view>
				
				<view class="list">
					<scroll-view scroll-y :style="'height:'+scrollHeight+'px'" @scrolltolower="getMore">
						<view class="my-data-box">
							<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
							<view class="my-data-box-content">
								<view class="left-box">
									<view class="title">推广积分提现</view>
									<view class="time">2020-31-21 22:55</view>
								</view>
								<view class="num up" >+600</view>
							</view>
						</view>
						<view class="my-data-box">
							<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
							<view class="my-data-box-content">
								<view class="left-box">
									<view class="title">推广积分提现</view>
									<view class="time">2020-31-21 22:55</view>
								</view>
								<view class="num up" >+600</view>
							</view>
						</view>
						<view class="my-data-box">
							<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
							<view class="my-data-box-content">
								<view class="left-box">
									<view class="title">推广积分提现</view>
									<view class="time">2020-31-21 22:55</view>
								</view>
								<view class="num up" >+600</view>
							</view>
						</view>
						<view class="my-data-box">
							<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
							<view class="my-data-box-content">
								<view class="left-box">
									<view class="title">推广积分提现</view>
									<view class="time">2020-31-21 22:55</view>
								</view>
								<view class="num up" >+600</view>
							</view>
						</view>
						<view class="my-data-box">
							<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
							<view class="my-data-box-content">
								<view class="left-box">
									<view class="title">推广积分提现</view>
									<view class="time">2020-31-21 22:55</view>
								</view>
								<view class="num up" >+600</view>
							</view>
						</view>
						<view class="my-data-box">
							<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
							<view class="my-data-box-content">
								<view class="left-box">
									<view class="title">推广积分提现</view>
									<view class="time">2020-31-21 22:55</view>
								</view>
								<view class="num up" >+600</view>
							</view>
						</view>
						<view class="my-data-box">
							<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
							<view class="my-data-box-content">
								<view class="left-box">
									<view class="title">推广积分提现</view>
									<view class="time">2020-31-21 22:55</view>
								</view>
								<view class="num up" >+600</view>
							</view>
						</view>
						<view class="my-data-box">
							<image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image>
							<view class="my-data-box-content">
								<view class="left-box">
									<view class="title">推广积分提现</view>
									<view class="time">2020-31-21 22:55</view>
								</view>
								<view class="num up" >+600</view>
							</view>
						</view>
					</scroll-view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		mounted() {
			this.getScrollH()
		},
		data() {
			return {
				statistics: null,
				member:null,
				loading: false,
				scrollHeight: 600,
			}
		},
		onLoad() {
		},
		onShow() {
			if (this.$common.loginAuth(true)) {
				// this.$nextTick((r) => {
				// 	uni.startPullDownRefresh({})
				// })
				this.$common.getMember().then((member)=>{
					this.member = member
				})
			}
		},
		methods: {
			getScrollH() {
				let sys = uni.getSystemInfoSync();
				let winHeight = sys.screenHeight;
				//console.log(winHeight)
				let _this = this
				// 计算scroll-view高度
				let query = uni.createSelectorQuery().in(_this);
				query.select('.top-box').boundingClientRect()
				query.selectViewport()
				query.exec(function(res) {
					//console.log(res)
					_this.scrollHeight = winHeight - res[0].bottom - 10 - 24
					
				})
			},
			getMore(){
				
			}
		},
	}
</script>


<style>
	.whole-box{
		background-color: #333333;
		min-height: calc(100vh - 45px - 24rpx);
		padding: 12px 0;
	}
	.gold-black-box{
		padding: 12px 0;
		margin: 0 10rpx;
		border: 2rpx solid #999999;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 276rpx;
		border: 2rpx solid #999999;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		/* height: 276rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
		padding: 0 30rpx;
	}
	.top-box-content .note-price{
		flex: 1;
		height: 102rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.note-price .note{
		font-size: 36rpx;
		font-weight: bold;
		color: #E5D4B9;
	}
	.note-price .price{
		font-size: 38rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.top-box-content .icon-gold-tixian{
		width: 92rpx;
		height: 106rpx;
		flex-shrink: 0;
		margin-left: 20rpx;
	}
</style>

<style>
	.gold-black-box .list{
		margin-top: 10px;
	}
	.list .my-data-box{
		margin-top: 20rpx;
		width: 690rpx;
		height: 160rpx;
		border: 2rpx solid #999999;
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
	}
	.list .my-data-box:first-child{
		margin-top: 0;
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		height: 160rpx;
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
	}

	.my-data-box-content .left-box{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: space-between;
	}
	.left-box .title{
		width: 	500rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #E9CFA4;
		overflow: hidden;    
		text-overflow:ellipsis;    
		white-space: nowrap;
	}
	.left-box .time{
		margin-top: 16rpx;
		font-size: 34rpx;
		color: #E9CFA4;
	}
	.my-data-box-content .num{
		margin-left: 10rpx;
		font-size: 40rpx;
		font-weight: bold;
		color: #3C3A3A;
	}
	.my-data-box-content .num.up{
		color: #2A6843;
	}
	.item .num.down{
		color: #A21818;
	}
</style>